<template>
    <div>
        <div style="display: flex;justify-content: space-between">
            <Button style="margin-top: 1%;margin-left: 1%" type="warning" ghost @click="addRead">标记全部已读</Button>
            <RadioGroup style="margin-top: 1%;margin-right: 1%" v-model="informVo.read" type="button"
                        @on-change="getInform">
                <Radio :label="0">全部</Radio>
                <Radio :label="1">未读</Radio>
                <Radio :label="2">已读</Radio>
            </RadioGroup>
        </div>
        <hr style="margin: 1% auto" color="#f4f4f4"/>
        <div style="background-color: white">
            <div v-if="informList.length<1" style="text-align: center;font-weight: bolder">无通知</div>
            <div v-else v-for="(inform,index) in informList" :key="index"
                 style="display: flex;justify-content: space-between;margin: 1% 0 1% 3%;border-bottom: 1.5px solid #f4f4f4;height: 50px">
                <div style="width: 50%;text-align: left">
                    <Tag v-if="inform.inRead" color="success">已读</Tag>
                    <Tag v-else color="error">未读</Tag>
                    {{inform.inContent}}
                </div>
                <div style="width: 50%;display: flex;justify-content: space-between;align-items: center">
                    <span>{{inform.inInformtime}}</span>
                    <div style="margin-left: 60px;margin-right: 10px">
                        <Button v-show="!inform.inRead" size="small" type="info" icon="md-book" ghost
                                @click="setRead(inform.inId)">标记已读
                        </Button>
                        <Button style="margin-left: 10px" size="small" type="error" icon="md-trash" ghost
                                @click="deleteInform(inform.inId)">删除
                        </Button>
                    </div>
                </div>
            </div>
        </div>
        <!--分页-->
        <div style="margin-left: 3%;">
            <Page style="height: 30px;margin-top: 1%" :total="total" :page-size="informVo.pageSize"
                  show-elevator show-sizer
                  show-total @on-change="changePageNum" :page-size-opts="pageSizeChoice"
                  @on-page-size-change="changePageSize"/>
        </div>
    </div>
</template>

<script>
  export default {
    data () {
      return {
        informVo: {
          pageNum: 1,
          pageSize: 7,
          read: 0,
          my: true
        },
        informList: [],
        total: 0,
        pageSizeChoice: [7, 13, 20, 50, 100]
      }
    },
    mounted () {
      this.getInform()
    },
    methods: {
      getInform () {
        this.$http.get('inform', { params: new URLSearchParams(this.informVo) }).then(res => {
          res = res.data
          if (res.code === 0) {
            this.informList = res.data
            this.total = res.count
          } else {
            this.$Message.error(res.msg)
          }
        })
      },
      // 改变当前页码
      changePageNum (pagenum) {
        this.informVo.pageNum = pagenum
        this.getInform()
      },
      // 改变每页个数
      changePageSize (pagesize) {
        this.informVo.pageSize = pagesize
        this.getInform()
      },
      // 标记已读
      setRead (id) {
        this.$http.put('inform?informId=' + id).then(res => {
          res = res.data
          if (res.code === 6000) {
            this.getInform()
            this.$Message.success(res.msg)
            this.$store.dispatch('informInfo', this)
          } else {
            this.$Message.error(res.msg)
          }
        })
      },
      // 删除消息通知
      deleteInform (id) {
        this.$Modal.confirm({
          title: '删除',
          content: '您确定要删除该通知吗？',
          onOk: () => {
            this.$http.delete(`inform?informId=${id}`).then(res => {
              res = res.data
              if (res.code === 6005) {
                this.getInform()
                this.$Message.success(res.msg)
                this.$store.dispatch('informInfo', this)
              } else {
                this.$Message.error(res.msg)
              }
            })
          }
        })
      },
      // 标记全部已读
      addRead () {
        this.$http.patch('inform').then(res => {
          res = res.data
          if (res.code === 6000) {
            this.getInform()
            this.$Message.success(res.msg)
            this.$store.dispatch('informInfo', this)
          } else {
            this.$Message.error(res.msg)
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
